<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style type="text/css">
			.set_bg_con {
				width: 440px;
				height: 40px;
				border: 1px solid #ddd;
				margin: 40px auto 0;
				background-color: #fff
			}
			
			.set_text {
				line-height: 40px;
				float: left;
				margin: 0 20px 0 10px;
				color: #666;
			}
			
			.style01,
			.style02,
			.style03,
			.style04,
			.style05,
			.style06 {
				width: 30px;
				height: 26px;
				float: left;
				margin: 8px 5px;
				background: gold;
				cursor: pointer;
			}
			
			.style01 {
				background: #0181cc;
			}
			
			.style02 {
				background: #00b9f1;
			}
			
			.style03 {
				background: #ef8201;
			}
			
			.style04 {
				background: #8fc320;
			}
			
			.style05 {
				background: #e84191;
			}
			
			.style06 {
				background: #ee87b4;
			}
		</style>
		<script type="text/javascript">
			// 点击色块改变网页的背景色，请写出对应的功能代码
			window.onload = function() {
				var oSty01 = document.getElementById("sty01")
				var oSty02 = document.getElementById("sty02")
				var oSty03 = document.getElementById("sty03")
				var oSty04 = document.getElementById("sty04")
				var oSty05 = document.getElementById("sty05")
				var oSty06 = document.getElementById("sty06")
				// 获取到背景的标签
				var oBody =  document.getElementById("body01")
				oSty01.onclick = function(){
					oBody.style.background = '#0181cc'
				}
				oSty02.onclick = function(){
					oBody.style.background = '#00b9f1'
				}
				oSty03.onclick = function(){
					oBody.style.background = '#ef8201'
				}
				oSty04.onclick = function(){
					oBody.style.background = '#8fc320'
				}
				oSty05.onclick = function(){
					oBody.style.background = '#e84191'
				}
				oSty06.onclick = function(){
					oBody.style.background = '#ee87b4'
				}
			}
		</script>
	</head>

	<body id="body01">
		<div class="set_bg_con">
			<div class="set_text">请选择网页的背景色：</div>
			<div class="style01" id="sty01"></div>
			<div class="style02" id="sty02"></div>
			<div class="style03" id="sty03"></div>
			<div class="style04" id="sty04"></div>
			<div class="style05" id="sty05"></div>
			<div class="style06" id="sty06"></div>
		</div>
	</body>

</html>